{include file="common/head"}
<head>
    <title>商品列表</title>
    <style>
        .form-control {
            width: initial;
            display: inline-block;
        }
        .card{box-shadow: 4px 4px 5px #555}
        a{margin:0 10px;font-size: 16px;}
        .card:hover{box-shadow: 1px 1px 0px #888;}
    </style>
</head>

<body>
    <div class="container-fluid">
        <div id="user_id" style="display: none;">{$user.id}</div>
        <form action="/index.php/goods/index" method="post">
            <div class="row" id="query_bar" style="height: 50px;line-height: 50px;">
                <div class="col" style='display: flex;'>
                    <strong class="fs-4" style="margin-right:20px;">广告位管理</strong>
                    {if $sys.view_type=='list'}
                    <a href="/goods/index/view_type/grid">
                        <span class="bi-grid-fill " style="">卡片模式</span>
                    </a>
                    {else}
                    <a href="/goods/index/view_type/list">
                        <span class="bi-list " style="">表格模式</span>
                    </a>
                    {/if}
                    <a href="/goods/index/status/blank/view_type/{$sys.view_type}">可租广告位</a>
                    <a href="/goods/index/status/mine/view_type/{$sys.view_type}">我的广告位</a>
                </div>
                <div class="col">
                    <label for="cat_id">类别:
                        <select id="cat_id" name="cat_id" class="form-control">
                            {foreach $cats as $k=>$v}
                            <option value="{$k}" {if $v['deepth']==1} style="font-size:1.1rem;color:#007;" {/if} {if $cat_id==$k }selected{/if}> {if $v['deepth']==1} ├─ {elseif $v['deepth']==2} &nbsp;&nbsp;&nbsp;&nbsp;├─ {elseif $v['deepth']==3} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├─ {/if} {$v['name']} </option> {/foreach} </select> </label> <button type="button" class="btn btn-warning query" style="vertical-align: middle;">
                                <span class="bi-search"></span>
                                </button>
                </div>
            </div>
    </div>
    </form>
    {if $sys['view_type']=='grid'}
    <div id="grid" style="display:flex;justify-content;flex-wrap:wrap;flex-direction:row;">
        {foreach $list['data'] as $k=>$kv}
        <div class="card" style="margin:1%;overflow: hidden;width:160px;">
            <div class="card-title text-center border-bottom">
                {if $kv['image']}
                <img src="{$kv['image'][0]}" style="width:100%;" />
                {else}
                {$kv['name']}
                {/if}
            </div>
            <div class="card-body">
                <div>
                    {$kv['cat_id_name']}
                    {if $kv['user_id']>=1}
                    {$kv['text']}
                    {$kv['end_time']}到期
                    {else}
                    <a href="/order/order_add/id/{$kv['id']}">
                        <button class="btn btn-sm btn-outline-primary">租用</button>
                    </a>
                    {/if}
                </div>
                <div>
                    {if $user.id==$kv['user_id'] || $user.group_id==1}
                    <a href="/index.php/goods/edit/id/{$kv['id']}">
                        <button tyle="button" class="btn btn-sm btn-info"><span class="bi-pencil"></span></button>
                    </a>
                    {if ($kv['text'] || $kv['image'])}
                    <input type="checkbox" name="goods_sel" class="form-check-input" value="{$kv['id']}" style="font-size: 1.5rem;" />
                    {/if}
                    {/if}
                    {if $kv['expire']}
                    {if $user.group_id==1}
                    <button type='button' class="clean btn btn-sm btn-warning" g_id="{$kv['id']}">回收</button>
                    {elseif $user.id==$kv['user_id']}
                    <button type='button' class="order btn btn-sm btn-primary" g_id="{$kv['id']}">续期</button>
                    {/if}
                    {/if}
                </div>
            </div>
        </div>
        {/foreach}
    </div>
    {else}
    <table class="table table-sm table-hover table-striped table-bordered">
        <thead class="table-info">
            <th>序号</th>
            <th>选择</th>
            <th>名称</th>
            <th>类别</th>
            <th>价格</th>
            <th>说明</th>
            <th>广告文字</th>
            <th>跳转地址<br />没有则跳站内详情页</th>
            <th>图片<br>
                <c style='color:blue;'>说明：图1网页，图2为图标。</c>
            </th>
            <th>广告宽度<br />默认100%宽 </th>
            <th>广告代码</th>
            <th>租用人</th>
            <th>是否可租</th>
            <th>租期</th>
            <th>点击</th>
            <th>
                {if $user.group_id==1}
                <a href="/index.php/goods/goods_add" alt="新增" style="color:white;">
                    <button type="button" class="btn btn-sm btn-primary">
                        <span class="bi-plus-lg"></span>
                    </button></a>
                {/if}
            </th>
        </thead>
        <tbody>
            {foreach $list['data'] as $k=>$kv}
            <tr>
                <td>{$k+1}</td>
                <td>
                    {if $kv['user_id'] && ($kv['text'] || $kv['image'])}
                    <input type="checkbox" name="goods_sel" class="form-check-input" value="{$kv['id']}" style="font-size: 1.5rem;" />
                    {/if}
                </td>

                <td class="long_field fs-3">
                    {if $kv['status']!=1}<span style="background:red;color:white;padding: 0 3px;">下架!</span>{/if}
                    {$kv['name']}
                    {if $kv['hot']==1}<span class="bi-lightning-charge-fill" style="color:red;"></span>{/if}
                </td>
                <td>{$kv['cat_id_name']}</td>
                <td>
                    <c>{$sys.currency_symbol}{$kv['price']}</c>
                </td>
                <td>{$kv['desc']}</td>
                <td>{$kv['text']}</td>
                <td>{$kv['link_url']}</td>
                <td>
                    {foreach $kv['image'] as $image}
                    <img class="goods_image" src="{$image}" style="max-height:40px;" />
                    {/foreach}
                </td>
                <td>{$kv.image_width}</td>
                <td>
                    {if $kv['status']==1 && $kv['user_id'] && ($kv['text'] || $kv['image']) && ($user.id= $kv['user_id'] || $user.group_id<3 ) }
                    <div id="g_{$kv.id}">{$kv['ad_js']}</div>
                    <button type='button' class="btn btn-sm btn-outline-primary" onclick="ad_script({$kv['id']})">生成广告代码</button>
                    <button class="btn btn-sm btn-outline-info copy_ad_code"  g_id="{$kv.id}">复制代码</button>
                    {/if}
                </td>

                <td>{$kv['user_id_name']}</td>
                <td>{if $kv['user_id']>=1}
                    已租
                    {else}
                    <a href="/order/order_add/id/{$kv['id']}">
                        <button class="btn btn-sm btn-outline-primary">租用</button>
                    </a>
                    {/if}
                </td>
                <td {if $kv['expire']}style="background:#f90;"{/if}>{$kv['start_time']}<br />{$kv['end_time']}</td>
                <td>{$kv['click']}</td>
                <td>
                    {if $user.id==$kv['user_id'] || ($user.group_id==1) }
                    <a href="/index.php/goods/edit/id/{$kv['id']}">
                        <button tyle="button" class="btn btn-sm btn-info"><span class="bi-pencil"></span></button>
                    </a>
                    {/if}
                    {if $kv['expire']}
                    {if $user.group_id==1}
                    <button type='button' class="clean btn btn-sm btn-warning" g_id="{$kv['id']}">回收</button>
                    {elseif $user.id==$kv['user_id']}
                    <button type='button' class="order btn btn-sm btn-primary" g_id="{$kv['id']}">续期</button>
                    {/if}
                    {/if}
                </td>
            </tr>
            {/foreach}
        </tbody>
    </table>
    {/if}
    {include file="common/pagination"}
    </div>

    <div id="sel_ads" style='position: absolute;top:0;right:0;width:29%;background: #f7f7f7;border:1px solid #666;padding:10px;height: 99%;display: none;'>
        <span class="fs-4" style="margin-right: 20px;">已选中广告</span>
        <button class="btn btn-sm btn-outline-primary" id="batch_script">批量广告代码</button>
        <button class="btn btn-sm btn-outline-info" id="copyBtn">复制代码</button>
        <div id="batch_js"></div>
        <!-- <button class="btn btn-sm btn-info" id="copy_script">复制代码</button> -->
        <div id='close_x' style="position: absolute;right:10px;top:0px;"><span class="bi-x fs-2"></span></div>
        <hr />
        <div id="sel_items" style="height:90%; hidden; overflow-y: scroll;">
            {foreach $list['data'] as $kv}
            <div class='sel_item' g_id="{$kv['id']}" style="margin-bottom:4px;border:1px solid #ccc;display: none;width:{if $kv.image_width} {$kv.image_width}{else}100%;{/if};cursor: pointer;">
                {if $kv['image']}
                <img src="{$kv['image'][0]}" style="width:100%;" alt='无图无真相' link_url="{$kv.link_url}" />
                {else}
                <span link_url="{$kv.link_url}">{$kv['text']}</span>
                {/if}
            </div>
            {/foreach}
        </div>
    </div>

</body>
<script type="text/javascript">
ad_script = function(id) {
    $.post('/goods/ad_script', { id: id }, function(res) {
        //console.log(res)
        if (res.code) {
            $("#g_" + id).text(res.js);
            layer.open({ 'title': '信息', 'content': '代码产生完成!' })
        }
    })
}

$(document).ready(function() {

    $(window).on("scroll", function() {
      var scrollPosition = $(window).scrollTop();
      $("#sel_ads").css({top:scrollPosition+"px"});
    });    

    $('#copyBtn').on('click',function() {
        var content = $('#batch_js').text(); 
        navigator.clipboard.writeText(content).then(function() {
            layer.msg('已复制到剪贴板'); 
        }, function(err) {
            layer.msg('复制失败:'+ err); 
        });
    });

    $(".copy_ad_code").on('click',function(){
        var content = $('#g_'+$(this).attr('g_id')).text(); 
        navigator.clipboard.writeText(content).then(function() {
            layer.msg('已复制到剪贴板'); 
        }, function(err) {
            layer.msg('复制失败:'+ err); 
        });
    })


    if ($("#batch_js")) {
        var js = localStorage.getItem('batch_script' + $("#user_id").text());
        $("#batch_js").text(js);
    }
    $("#copy_script").on('click', function() {

    })
    $(".query").on('click', function() {
        var index = layer.load(0, { shade: false }); 
        var cid = $("#customer_id").val();
        var order_no = $("#order_no").val();
        var sdate = $("#sdate").val();
        var edate = $("#edate").val();

        $("form").submit();
        layer.close(index);
    })


    $(".clean").on('click', function() {
        var g_id = $(this).attr('g_id');
        layer.confirm('是否确定回收广告位？', ['确定', '再检查一下'], function() {
            $.post('/goods/ad_clean', { id: g_id }, function(res) {
                if (res.code == 1) {
                    layer.msg('已回收！');
                    setTimeout(function() {
                        location.href.reload();
                    }, 1000);
                } else {
                    layer.open({ content: res.msg });
                }
            })
        }, function() {
            layer.msg('yes!');
        })
    });

    $(".order").on('click', function() {
        var g_id = $(this).attr('g_id');
        window.open('/order/order_add/id/' + g_id, '_self');
    });

    $("#close_x").on('click', function() {
        $("#sel_ads").fadeOut(100);
        $("table,#grid").css({width:'100%'});

    })
    $(".sel_item img").on('click', function() {
        layer.msg($(this).attr('link_url'));
    })

    $("#batch_script").on('click', function() {
        var sel_ids = [];
        $(".sel_item").each(function() {
            var id = $(this).attr('g_id');
            if ($(this).attr('sel') == 1) {
                sel_ids.push(id);
            }

        })
        //console.log(sel_ids);

        if (sel_ids) {
            $.post('/goods/batch_script', { ids: sel_ids }, function(res) {
                //console.log(res);
                if (res.code) {
                    $("#batch_js").text(res.msg);
                    localStorage.setItem('batch_script' + $("#user_id").text(), res.msg);
                    layer.open({ content: '广告内容已更新！' });
                } else {
                    layer.open({ content: res.msg });
                }
            })
        }
    })


    $("input[type='checkbox']").on('click', function() {
       $("table,#grid").css({width:'70%'});
       $("#sel_ads").show();

        var id = $(this).val();
        var sel = $(this).prop('checked');
        $(".sel_item").each(function() {
            if ($(this).attr('g_id') == id) {
                if (sel) {
                    $(this).attr('sel', 1).show();
                } else {
                    $(this).attr('sel', 0).hide();
                }
            }
        })

    })

    $(".goods_image").on('click', function() {
        var img = $(this).attr('src');
        if (!img.trim()) return;

        layer.open({
            type: 1,
            offset: ['10px', '10px'],
            title: '',
            closeBtn: 0, //不显示关闭按钮
            anim: 1,
            time: 5 * 1000,
            shadeClose: true, //开启遮罩关闭              
            skin: 'layui-layer-rim',
            content: "<img src='" + img + "' style='width:100%'>"
        });
    })




})
</script>
</body>

</html>